<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水果购物车管理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
<div id="wrapper" v-cloak>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="/page/end/index.html">后台</a></span>
                </transition>
            </div>
            <el-menu :default-openeds="['1']" style="border: none;" background-color="black" text-color="#fff"
                     active-text-color="#ffd04b"
                     default-active="hotel"
                     class="el-menu-vertical-demo" :collapse="isCollapse">
                <a href="/page/end/index.html">
                    <el-menu-item index="home">
                        <i class="el-icon-data-line"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                </a>
                <el-submenu index="1" v-if="user.permission && user.permission.length > 0">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">信息管理</span>
                    </template>
                    <a :href="item.path" v-for="item in user.permission" :key="item.id">
                        <el-menu-item :index="item.flag">
                            <i class="el-icon-s-data"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </a>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i style="font-size: 22px; cursor: pointer"
                           :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleCollapse"></i>
                    </el-col>
                    <el-col :span="2" :offset="21" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.username}}</span>
                        <el-dropdown>
                            <img src="/files/avatar"
                                 style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown">
                                <a href="/page/end/person.html"
                                   style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a>
                                <a @click="logout" href="#"
                                   style="display:block; width: 100px;  text-align: center; color: black">退出</a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 主体区域 -->
            <el-main>
                <div style="color: black; font-size: 20px; margin: 10px 0">张福记菜单信息</div>
                <div style="height: 1px; background-color: white"></div>
                <el-input v-model="search" style="width: 20%;" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索"
                          @keyup.enter.native="loadTable"></el-input>
                <el-button @click="add" type="primary" size="mini" style="margin: 10px 0">新增</el-button>
                <!-- <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">导出</el-button> -->
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            :prop="item.prop"
                            :label="item.label"
                            v-for="item in props"
                    >
                    </el-table-column>

                    <el-table-column
                            label="套餐图片"
                            width="180">
                        <template slot-scope="scope">
                            <img :src="'/image/'+scope.row.imgsrc" alt="" style="width: 150px;height: 150px">
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="text">编辑</el-button>
                            <el-popconfirm
                                    @onConfirm="del(scope.row.id)"
                                    title="确定删除？"
                            >
                                <el-button type="text" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div style="background-color: white">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[5, 10, 20, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>

                <el-dialog title="张福记菜单信息" :visible.sync="dialogFormVisible" width="30%"
                           close-on-click-modal="false" close-on-press-escape="false" show-close="false">
                    <!--<el-form :model="entity">-->
                        <!--<el-form-item v-if="item.prop !== 'id'" :label="item.label" label-width="100px" v-for="item in props">-->
                            <!--<el-input v-model="entity[item.prop]" autocomplete="off" style="width: 80%"></el-input>-->
                        <!--</el-form-item>-->
                    <!--</el-form>-->



                    <div>
                        <el-tabs type="card">
                            <el-tab-pane label="菜单信息">
                                <el-form ref="form" :model="entity" label-width="80px">
                                    <el-form-item label="编号">
                                        <el-input v-model="entity.id"></el-input>
                                    </el-form-item>
                                    <el-form-item label="名称">
                                        <el-input v-model="entity.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="上传图片">
                                        <el-upload
                                                class="avatar-uploader"
                                                action="/files/upload"
                                                :show-file-list="false"
                                                :on-success="handleAvatarSuccess"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="套餐价格">
                                        <el-input v-model="entity.price"></el-input>
                                    </el-form-item>
                                    <el-form-item label="/份">
                                        <el-input v-model="entity.total"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-tab-pane>


                            <el-tab-pane label="套餐信息">
                                <div  style="overflow-y: scroll;height: 300px">
                                    <el-table
                                            ref="multipleTable"
                                            :data="itemGroupSelectAllData"
                                            tooltip-effect="dark"
                                            style="width: 100%"
                                            @selection-change="handleSelectionChange">
                                        <el-table-column
                                                type="selection"
                                                width="120">
                                            <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
                                        </el-table-column>
                                        <el-table-column
                                                prop="id"
                                                label="套餐id"
                                                width="120">
                                        </el-table-column>
                                        <el-table-column
                                                prop="name"
                                                label="凉菜"
                                                width="120">
                                        </el-table-column>
                                        <el-table-column
                                                prop="remark"
                                                label="热菜"
                                                show-overflow-tooltip>
                                        </el-table-column>

                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save">确 定</el-button>
                    </div>
                </el-dialog>

            </el-main>
        </el-container>
    </el-container>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/tinymce/tinymce.min.js"></script>
<script src="../../js/base.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<script>

    let urlBase = "/api/hotel/";
    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            dialogFormVisible: false,
            entity: {},
            isCollapse: false,
            search: '',
            props: [{"label":"菜单编号","prop":"id"},{"label":"图片","prop":"imgsrc"},{"label":"菜名","prop":"name"},{"label":"价格","prop":"price"},{"label":"个数","prop":"total"}],
            imageUrl: '',
            itemGroupSelectAllData:[],
            itemGroupids:[],
            multipleSelection:[],

        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.loadTable();
            this.loadGroups();
        },
        methods: {
            //上传图片
            handleAvatarSuccess(res, file) {
                console.log(res)
                console.log(file)

                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(this.imageUrl)
                // console.log(this.entity.img)
                this.entity.imgsrc=res.data;
                // console.log(this.entity.img)
            },

            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            // 单个项目的全查
            loadGroups(){
                axios.get("/api/hotel").then(res=>{
                    console.log(res.data)
                    this.itemGroupSelectAllData=res.data.data
                })
            },
            //添加/修改的弹出框事件
            handleSelectionChange(val) {
                this.multipleSelection = val;
                // 遍历val中的数据到新的itemids数组中
                console.log("val",val)
                this.itemGroupids=[]
                for (let i = 0; i < val.length; i++) {
                    this.itemGroupids.push(val[i].id)
                }
                console.log("this.itemGroupids",this.itemGroupids)
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
            loadTable() {
                $.get(urlBase + "/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
            exp() {
                window.open(urlBase + "/export");
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.loadTable();
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.loadTable();
            },
            add() {
                this.entity = {};
                this.dialogFormVisible = true;
            },
            save() {
                console.log(this.itemGroupids)
                console.log(this.entity)
                axios.post("/api/hotel/hotelSave?itemGroupids="+this.itemGroupids,this.entity).then(res=>{
                    console.log(res)
                    this.dialogFormVisible = false;
                    window.location.href="http://localhost:9900/page/end/hotel.html"
                })
            },
            edit(obj) {
                this.entity = obj;
                this.dialogFormVisible = true;
            },
            del(id) {
                $.ajax({
                    url: urlBase + id,
                    type: "delete"
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "删除成功",
                            type: "success"
                        })
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
    })
</script>
</body>
</html>
